<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 伪类选择器： 语法：任意选择器：hover【悬停】 每个伪类选择器，具备特点
			               所有元素具备：hover  【常见伪类选择器】       
			*/
		   h1:hover{
			   color: #55aaff;
			   background: #55ffff;
		   }
		 /**
		  *伪类选择器:  link       链接未点击时状态
		  *            active     链接被点击时状态
		  *            visited    链接点击后状态
		  *            hover      悬停链接时状态 
		  * 主要结合在一起，针对a元素效果  
		  */
		 a:link{ /*未访问状态*/
			 color: #55ffff;
			 /*去掉超链接下划线*/
			 text-decoration: none;
		 }
		 a:active{/*被点击时状态*/
			 color: #55ff7f;
			 background: #ece034;
		 }
		 a:visited{/*点击后状态*/
			 color: #aaf;
		 }
		 a:hover{
			 font-size: 36px;
		 }
		  /**
		 		   * 伪类选择器：input：focus 获取焦点 鼠标点击输入框时效果
		 		   * 
		 		   针对输入框 input元素
		 		   */
		 		  input:focus{
		 			  background: #f9f900;
		 		  }
				  /* 伪类选择器    :first-child  第一个儿子元素
				                  :last-child   最后一个儿子元素
							      :nth-child(n) 匹配n个儿子元素   
					针对：父子级 默认父子级 table 列表			   
											   */
			li:first-child{
				background: #55aaff;
				color: #fef;
			}
			li:last-child{
				font-size: 15pt;
			}
			li:nth-child(2){
			 background: #ffaaff;
			 font-size: 15px;
			 }
		  li:nth-child(3){
			 background: #55007f;
			 font-size: 15px;
		 }
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text">
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
			<li>唐山</li>
		</ol>
	</body>
</html>